import React from 'react';
import {
  StyleSheet,
  View,
  TouchableOpacity
} from 'react-native';
import { scaleSize } from '../../utils/screen';
import FontText from './FontText';

class AddTableActionBar extends React.Component {
  constructor(props) {
    super(props);
  }

  renderLeftActionButtons() {
    const { leftActions } = this.props;

    return leftActions.map((action, index) => {
      return (
        <TouchableOpacity
          activeOpacity = {0.8}
          onPress = {()=> action.action()}
          style={[styles.actionButton, action.style]}
          key={`left_${index}`}
        >
          <FontText
            style={[styles.actionButtonText, action.style]}
            font={'book'}
          >
            {action.label}
          </FontText>
        </TouchableOpacity>
      );
    });
  }

  renderRightActionButtons() {
    const { rightActions } = this.props;
    return rightActions.map((action, index) => {
      return (
        <TouchableOpacity
          activeOpacity = {0.8}
          onPress = {()=> action.action()}
          style={[styles.actionButton, action.style]}
          key={`right_${index}`}
        >
          <FontText
            style={[styles.actionButtonText, action.style]}
            font={'book'}
          >
            {action.label}
          </FontText>
        </TouchableOpacity>
      );
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.leftActionContainer}>
          {this.renderLeftActionButtons()}
        </View>
        <View style={styles.rightActionContainer}>
         {this.renderRightActionButtons()}
        </View>
      </View>
    );
  }
};


/* StyleSheet =============================================================== */

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  leftActionContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  rightActionContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  actionButton: {
    backgroundColor: '#cfa972',
    borderRadius: scaleSize(5),
    height: scaleSize(50),
    paddingHorizontal: scaleSize(30),
    paddingVertical: 0,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: scaleSize(18),
  },
  actionButtonText: {
    color: '#000000',
    fontSize: scaleSize(27),
  },
});

export default AddTableActionBar;
